<template>
	<div>
		<svg-icon
			class-name="screenFull-svg"
			:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
			@click="click"
		/>
	</div>
</template>

<script>
	import * as screenFull from 'screenfull';

	export default {
		name: 'ScreenFull',
		data() {
			return {
				isFullscreen: false
			};
		},
		mounted() {
			this.init();
		},
		beforeDestroy() {
			this.destroy();
		},
		methods: {
			click() {
				if (!screenFull.isEnabled) {
					this.$message({
						message: 'you browser can not work',
						type: 'warning'
					});
					return false;
				}
				screenFull.toggle();
			},
			change() {
				this.isFullscreen = screenFull.isFullscreen;
			},
			init() {
				if (screenFull.isEnabled) {
					screenFull.on('change', this.change);
				}
			},
			destroy() {
				if (screenFull.isEnabled) {
					screenFull.off('change', this.change);
				}
			}
		}
	};
</script>

<style scoped>
	.screenFull-svg {
		display: inline-block;
		cursor: pointer;
		fill: #5a5e66;
		width: 20px;
		height: 20px;
		vertical-align: 10px;
	}
</style>
